
// 绘制柱状图
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '柱状图分数划分';
var namedate = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var numdate = [64, 80, 100, 56, 23, 57, 54, 28, 270, 47];
var colorlist = [];
numdate.forEach(element => {
    if (element < 60) {
        colorlist.push(["#fc7095", "#fa8466"])
    } else if (element >= 60 && element < 90) {
        colorlist.push(["#386ffd", "#74b3ff"])
    } else {
        colorlist.push(["#1aa8ce", "#49d3c6"])
    }
});
option = {

    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: namedate,
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                lineStyle: {
                    color: "#4dd1c4",
                    width: 1
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#999'
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: '{value} ',
                show: true,
                textStyle: {
                    width: '10px',
                    color: '#999'
                }
            },
            axisLine: {
                lineStyle: {
                    color: "#4dd1c4",
                    width: 0.1
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#ddd'
                }
            }

        }
    ],
    series: [
        {
            name: '',
            type: 'bar',
            barWidth: '60%',
            data: numdate,
            itemStyle: {
                normal: {
                    // color: new echarts.graphic.LinearGradient(
                    //     0, 0, 0, 1,
                    //     [
                    //         {offset: 1, color: 'red'},
                    //         {offset: 0, color: 'orange'}
                    //     ]
                    // )
                    color: function (params) {
                        // var colorList = colorlist;
                        // return colorList[params.dataIndex];
                        var colorList = colorlist

                        var index = params.dataIndex;
                        // if(params.dataIndex >= colorList.length){
                        //         index=params.dataIndex-colorList.length;
                        // }
                        return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                            [
                                { offset: 1, color: colorList[index][0] },
                                { offset: 0, color: colorList[index][1] }
                            ]);


                    }
                }
            }
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
